import { useState, useImperativeHandle, useRef, lazy } from 'react'
/* -------------------------------------------------------- antd -- */
import { Image } from 'antd'
/* -------------------------------------------------------- Declare -- */
const { $fn, $lazy, $ } = window
/* -------------------------------------------------------- Async Component -- */
const Modal = $lazy.hook(()=>import('@antd/modal'))
const Img = lazy(()=>import('@antd/image'))
// const Video = lazy(()=>import('#cpt/video/video'))
// const Video = lazy(()=>import('#cpt/video/flv'))
const Video = lazy(()=>import('#cpt/video/mpegts'))
/* --------------------------------------------------------  预览图片配置 -- */
const Index = ( props, ref ) => {
	const [ config, setConfig] = useState(props)
	
	let {
		modal, 						/** @param {Object}				# 弹窗其它配置 */
		image, 						/** @param {Object}				# 图片其它配置 */
		// 弹窗
		title = '图片预览', 			/** @param {String}				# 标题 */
		width = '50%', 				/** @param {Number, String}		# 弹窗宽度 */
		height, 					/** @param {Number, String}		# 弹窗高度 */
		urlStr,						/** @param {String}				# 图片地址字段名 */
		mode='img',					/** @param {String}				# 模式 */
		// 图片
		url,						/** @param {Array, String}		# 图片地址 */
		player,						/** @param {Object}				# 图片地址 */
	} = config
	
	const modalRef = useRef()
	
	const open = value => {
		const config = value ?? props
		if( config ){
			setConfig(config)
		}
		
		setTimeout(()=>$.ref(modalRef).open(), 50)
	}
	if( mode === 'video') {
		width = '90%'
		height = '90%'
		title = '视频预览'
	}
	// Expose
	useImperativeHandle( ref, () => ({
		open
	}))
	return (
		<Modal 
			ref			= { modalRef } 
			title		= { title }
			width		= { width }
			height 		= { height }
			controls	= { false }
			key 		= { url }
			{ ...modal }
		>
			{
				mode === 'video' 
				? 
					<Video src={$fn.url(url)} config={{ autoplay:true }} player={player} />
				:
					$fn.hasArray(url) ? (
						<Image.PreviewGroup>
							<div className='fv' style={{gap:'5px 0'}}>
								{
									url.map((v,i)=><div key={i} className='fxmc'><Img src={ $fn.url(urlStr ? v[urlStr] : v) } {...image}/></div>)
								}
							</div>
						</Image.PreviewGroup>
					) : <div className='fxmc'><Img src={$fn.url(url)} {...image}/></div>
			}
		</Modal>
	)
}
export default Index